<template>
  <div ref="el" class="home">{{ title }}</div>
  <el-button @click="updateSize">改变</el-button>
</template>
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated, ref } from 'vue';

// 生命周期钩子
const el = ref()
const title = ref('生命周期钩子的使用')
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
// 注册一个回调函数，在组件挂载完成后执行
let intervalId

// 注册一个钩子，在组件被挂载之前被调用。
// 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
onBeforeMount(() => {
  console.log('onBeforeMount')
  title.value = '注册一个钩子'
})

onMounted(() => {
  console.log('onMounted')
  el.value.style.fontSize = '20px'
  intervalId = setInterval(() => {
    console.log('测试')
  }, 1000)
})

// 注册一个钩子，在组件实例被卸载之前调用。
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})

// 注册一个回调函数，在组件实例被卸载之后调用
onUnmounted(() => {
  console.log('onUnmounted')
  clearInterval(intervalId)
})
// 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用
onUpdated(() => {
  console.log('点击了');
  console.log('onUpdated')
  const nowNum = parseInt(Math.random() * 5)
  // console.log('colors[nowNum]', colors[nowNum])
  el.value.style.color = colors[nowNum]
})

// 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用
// 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
  title.value = '哈哈哈'
})
// 注册一个钩子，在捕获了后代组件传递的错误时调用。
/**
 * 错误可以从以下几个来源中捕获：
  组件渲染
  事件处理器
  生命周期钩子
  setup() 函数
  侦听器
  自定义指令钩子
  过渡钩子
  这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。
 */
onErrorCaptured((obj, component, msg) => {
  console.log('onErrorCaptured', obj, component, msg)
})

const updateSize = () => {
  // console.log(``)
  const num =parseInt(Math.random() * 100)
  title.value = `生命周期钩子的使用-${num}`
}

</script>
<style lang="scss" scoped>

</style>